<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Campaign</title>
    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans" rel="stylesheet">

    <!--font-awesome CDN-->
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <!--font-awesome-->
    <link href="styles/css/font-awesome.min.css" rel="stylesheet">


    <link rel="stylesheet" href="scss/utils/Main.css">
    <link rel="stylesheet" href="scss/utils/Admin.css">

</head>
<body class="has-admin-nav has-admin-aside has-admin-footer">
    <main role="main">
        <section class="admin-navbar">
            <div class="container">
                <ul class="nav nav-pills" role="tablist">
                    <li role="presentation" class="active"><a href="AdminIndex.html">Campaigns</a></li>
                    <li role="presentation"><a href="AdminStats.html">Stats</a></li>
                    <li role="presentation"><a href="AdminStores.html">Stores</a></li>
                    <li role="presentation"><a href="AdminProfits.html">Profits</a></li>
                    <li role="presentation"><a href="AdminSettings.html">Settings</a></li>
                    <li role="presentation"><a href="AdminSubaccounts.html">Subaccounts</a></li>
                    <li role="presentation"><a href="AdminCoupons.html">Coupons</a></li>
                </ul>
            </div>
        </section>

        <section class="admin-content admin-content-header">
            <div class="container">
                <div class="box">
                    <h2 class="PTSerif">Campaigns</h2>
                    <h3>Figures based on June 13, 2017 at 10:33 AM GMT+08:00</h3>
                </div>
            </div>
        </section>

        <section class="admin-content section-1">
            <div class="container">
                <div class="box">
                    <div class="row">
                        <ul class="nav nav-pills nav-pills-blank col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2" role="tablist">
                            <li role="presentation" class="active"><a href="#ai_today" role="tab" data-toggle="tab" aria-controls="ai_today"><span>Today</span></a></li>
                            <li role="presentation"><a href="#ai_yesterday" role="tab" data-toggle="tab" aria-controls="ai_yesterday"><span>Yesterday</span></a></li>
                            <li role="presentation"><a href="#ai_this_week" role="tab" data-toggle="tab" aria-controls="ai_this_week"><span>This week</span></a></li>
                            <li role="presentation"><a href="#ai_last_week" role="tab" data-toggle="tab" aria-controls="ai_last_week"><span>Last week</span></a></li>
                            <li role="presentation"><a href="#ai_this_month" role="tab" data-toggle="tab" aria-controls="ai_this_month"><span>This month</span></a></li>
                            <li role="presentation"><a href="#ai_last_month" role="tab" data-toggle="tab" aria-controls="ai_last_month"><span>Last month</span></a></li>
                            <li role="presentation"><a href="#ai_all" role="tab" data-toggle="tab" aria-controls="ai_all"><span>All time</span></a></li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="ai_today">
                            <ul class="list-unstyled nav-justified">
                                <li class="popover-list" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Number of garments sold for selected time period. This figure will increase when sales occur and decrease when refunds occur.">
                                    <div class="font-rem-2-4">Garments sold</div>
                                    <h2>0</h2>
                                </li>
                                <li class="popover-list" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Estimated profit for the selected time period. This figure will change when sales are made, when color count adjustments are made, and when changes are made to an existing order.">
                                    <div class="font-rem-2-4">Estimated Profit</div>
                                    <h2>$0.00</h2>
                                </li>
                                <li class="popover-list" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Number of mugs, phone cases, and posters sold for selected time period. This figure will increase when sales occur and decrease when refunds occur.">
                                    <div class="font-rem-2-4">Items sold</div>
                                    <h2>0</h2>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="ai_yesterday"></div>
                        <div class="tab-pane fade" id="ai_this_week"></div>
                        <div class="tab-pane fade" id="ai_last_week"></div>
                        <div class="tab-pane fade" id="ai_this_month"></div>
                        <div class="tab-pane fade" id="ai_last_month"></div>
                        <div class="tab-pane fade" id="ai_all"></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="admin-content section-table">
            <div class="container">
                <div class="box">
                    <div class="clearfix division division-hidden-sm section-table-header">
                        <div class="col-sm-2 division-item" style="padding-left: 20px;">
                            Total:0
                        </div>
                        <div class="col-sm-4 division-item sm-pl-20">

                            <div class="dropdown dropdown-right dropdown-select">
                                <div class="clearfix dropdown-toggle"  id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    <span>Sales Stats:</span>
                                    <button class="btn btn-clean font-rem-1-6" type="button">
                                        From current run
                                    </button>
                                    <i class="fa fa-navicon fr color-pink"></i>
                                </div>

                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a href="###" data-value="from_current_run">From current run</a></li>
                                    <li><a href="###" data-value="from_all_runs">From all runs</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-sm-3 division-item sm-pl-20">
                            <div class="dropdown dropdown-right dropdown-select">
                                <div class="clearfix dropdown-toggle"  id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    <span>Status:</span>
                                    <button class="btn btn-clean font-rem-1-6" type="button">
                                        Active
                                    </button>
                                    <i class="fa fa-navicon fr color-pink"></i>
                                </div>

                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                    <li><a href="###" data-value="active">Active</a></li>
                                    <li><a href="###" data-value="declined">Declined</a></li>
                                    <li><a href="###" data-value="ended">Ended</a></li>
                                    <li><a href="###" data-value="all">All</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <form action="" class="form-inline">
                                <div class="form-group">
                                    <input type="text" placeholder="Search by URL" class="form-control form-control-clean">
                                </div>
                            </form>
                        </div>
                    </div>
                    <!--No campaigns found 没有结果时显示的内容-->
                    <!--<div class="font-rem-2-4 text-center no_found">No campaigns found</div>-->
                    <div class="table-wrapper table-responsive">
                        <table class="table" id="table"></table>
                    </div>
                </div>
            </div>
        </section>

    </main>
    <!--jquery-->
    <!--CDN-->
    <!--<script src="https://code.jquery.com/jquery-1.12.4.min.js"-->
            <!--integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="-->
            <!--crossorigin="anonymous"></script>-->
    <!--LOCAL-->
    <script src="lib/jquery.1.12.4.min.js"></script>
    <!--end jquery-->

    <!--bootstrap-->
    <!--CDN-->
    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
    <!--LOCAL-->
    <script src="lib/bootstrap.min.js"></script>
    <!--end bootstrap-->

    <!--bootstrap-table-->
    <!--CDN-->
    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>-->
    <!--LOCAL-->
    <script src="lib/bootstrap-table.min.js"></script>
    <!--end bootstrap-table-->

    <script src="scripts/index.js"></script>
    <script>
        $(function(){

            initDropdownSelect({url: 'json/AdminIndex-1.json',params:{},controlElement:"#table"});
            $('#table').bootstrapTable({
                url: 'json/AdminIndex.json',
                cache:false,
                columns: [{
                    field: 'title',
                    title: 'Title'
                }, {
                    field: 'url',
                    title: 'URL'
                }, {
                    field: 'profit',
                    title: 'Profit',
                    formatter:priceFormatter
                }, {
                    field: 'sold',
                    title: 'Sold'
                },{
                    field: 'start_date',
                    title: 'Start Date',
                    formatter:dateDayFormatter
                },{
                    field: 'end',
                    title: 'End Date',
                    formatter:dateDayFormatter
                },{
                    field: 'date_status',
                    title: 'Date Status',
                    formatter:dateStatusFormatter
                }]
            });
        })
    </script>
</body>
</html>